<template>
  <a-dropdown
    style="width: 300px;"
    v-model="visible"
    placement="bottomLeft"
    :trigger="['click']"
    @visibleChange="visibleChange"
  >
    <template #overlay>
      <div>
        <div class="headinput" style="align-items: center;padding: 0 8px;">
          <input class="ant-calendar-input" v-model="leftValue" style="border: none; width: 120px;" placeholder="开始季度" />
          <div style="width: 40px;"> ~ </div>
          <input class="ant-calendar-input" v-model="rightValue" style="border: none;" placeholder="结束季度" />
        </div>
        
        <div class="ant-calendar ant-calendar-range ant-calendar-picker-container-content" style="user-select: none">
          <div class="ant-calendar-panel">
            <div class="ant-calendar-date-panel">
              <div class="ant-calendar-range-part ant-calendar-range-left">
                <div style="outline: none;">
                  <div class="calendar_head">
                    <a-icon type="double-left" style="color: rgba(0, 0, 0, 0.45);" @click="previous('left')" />
                    <span> {{ leftYear }} </span>
                    <a-icon type="double-right" style="color: rgba(0, 0, 0, 0.45);" @click="next('left')" />
                  </div>
                  <div class="ant-calendar-body">
                    <a-row>
                      <a-col style="line-height: 40px; cursor: pointer;" :span="12" v-for="(item, index) in quarterItem">
                        <a class="ant-calendar-month-panel-month" :class="leftCalss(item)"
                          @click="leftChange(item)"
                        >
                          {{ item.label }}
                        </a>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
              
              <div class="ant-calendar-range-part ant-calendar-range-right">
                <div style="outline: none;">
                  <div class="calendar_head">
                    <a-icon type="double-left" style="color: rgba(0, 0, 0, 0.45);" @click="previous('right')" />
                    <span> {{ rightYear }} </span>
                    <a-icon type="double-right" style="color: rgba(0, 0, 0, 0.45);" @click="next('right')" />
                  </div>
                  <div class="ant-calendar-body">
                    <a-row>
                      <a-col style="line-height: 40px; cursor: pointer;" :span="12" v-for="(item, index) in quarterItem">
                        <a class="ant-calendar-month-panel-month" :class="rightCalss(item)"
                          @click="rightChange(item)"
                        >
                          {{ item.label }}
                        </a>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- <template #overlay>
      <div style="width: 300px;box-shadow: 0 2px 8px rgb(0 0 0 / 15%);">
        <div style="display: flex; align-items: center; height: 50px; justify-content: space-between; background: #fff; padding: 0 16px; border-bottom: 1px solid #e8e8e8;">
          <a-icon type="double-left" @click="previous" />
          <span> {{ currentYear }} </span>
          <a-icon type="double-right" @click="next" />
        </div>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="1">第一季度</a-menu-item>
          <a-menu-item key="2">第二季度</a-menu-item>
          <a-menu-item key="3">第三季度</a-menu-item>
          <a-menu-item key="4">第四季度</a-menu-item>
        </a-menu>
      </div>
    </template> -->
    
    <span ref="pickerInput" class="ant-calendar-picker" style="width: 100%;" tabindex="0">
      <span class="ant-calendar-picker-input ant-input">
        <!-- {{localValue}} -->
        <input readonly="true" v-model="leftValue" placeholder="开始季度" class="ant-calendar-range-picker-input" />
        <span class="ant-calendar-range-picker-separator"> ~ </span>
        <input readonly="true" v-model="rightValue" placeholder="结束季度" class="ant-calendar-range-picker-input" />
        <a-icon v-show="showClose" @click.stop="clearVal" type="close-circle" class="action ant-calendar-picker-clear" />
        <span class="ant-calendar-picker-icon"></span>
      </span>
    </span>
    <!-- <a-button> 请选择 <a-icon type="down" /> </a-button> -->
  </a-dropdown>
</template>

<script>
  export default {
    name: "QuarterRangePicker",
    model: {
      event: 'packageInput'
    },
    components: {
    },
    props: {
      value: {
        type: [Array, undefined],
        default: () => {
          return []
        }
      },
    },
    data() {
      return {
        visible: false,
        currentYear: 2022,
        leftYear: 2022,
        rightYear: 2022,
        start: null,
        end: null,
        showClose: false,
        currQuarter: null,
        quarterItem: [
          { value: 1, label: '第一季度' },
          { value: 2, label: '第二季度' },
          { value: 3, label: '第三季度' },
          { value: 4, label: '第四季度' },
        ]
      }
    },
    created() {
      // console.log(this.localValue)
      // console.log(this.value)
      this.currentYear = new Date().getFullYear();
      var currMonth = new Date().getMonth()+1;
      
      this.currQuarter = Math.floor( ( currMonth % 3 == 0 ? ( currMonth / 3 ) : ( currMonth / 3 + 1 ) ) ); 
      // this.start = this.currQuarter
    },
    mounted() {
      this.$refs.pickerInput.addEventListener('mouseover', this.mouseOver)
      this.$refs.pickerInput.addEventListener('mouseout', this.mouseOut)
    },
    beforeDestroy() {
      this.$refs.pickerInput.removeEventListener('mouseover', this.mouseOver)
      this.$refs.pickerInput.removeEventListener('mouseout', this.mouseOut)
    },
    computed: {
      itemDisabled() {
        return (type, item) => {
          if (this.leftYear == this.rightYear){
            if (type == 'left') {
              return item.value == 4
            } else {
              return item.value < this.start
            }
          }
          return false
        }
      },
      leftCalss() {
        return (item) => {
          let lclass = '';
          if (this.start==item.value) {
            lclass = 'selected'
          }
          if (this.itemDisabled('left', item)){
            lclass += 'disabled'
          } 
          return lclass
        }
      },
      rightCalss() {
        return (item) => {
          let lclass = '';
          if (this.end==item.value) {
            lclass = 'selected'
          }
          if (this.itemDisabled('right', item)){
            lclass += 'disabled'
          } 
          return lclass
        }
      },
      leftValue() {
        let item = this.quarterItem.find((v) => {
          return v.value == this.start
        })
        return item ? `${this.leftYear}年${item.label}` : undefined
      },
      rightValue() {
        let item = this.quarterItem.find((v) => {
          return v.value == this.end
        })
        return item ? `${this.rightYear}年${item.label}` : undefined
      },
      localValue: {
        get() {
          return this.start && this.end ? [`${this.leftYear}-${this.start}`, `${this.rightYear}-${this.end}`] : []
        },
        set(value) {
          if (value && value.length) {
            let leftVal = value[0].split('-')
            let rightVal = value[1].split('-')
            if (leftVal.length && rightVal.length) {
              this.leftYear = Number(leftVal[0])
              this.start = Number(leftVal[1])
              this.rightYear = Number(rightVal[0])
              this.end = Number(rightVal[1])
            }
          } else {
            this.start = null
            this.end = null
          }
        }
      }
    },
    watch: {
      value: {
        handler(val, oldval) {
          // if (val && val.length) {
            this.localValue = val
          // }
        },
        immediate: true
      }
    },
    methods: {
      previous(type) {
        if (type == 'left') {
          this.leftYear = Number(this.leftYear) - 1
        } else {
          this.rightYear = Number(this.rightYear) - 1
          if (this.leftYear > this.rightYear) {
            this.leftYear = Number(this.leftYear) - 1
          }
        }
        // this.currentYear = Number(this.currentYear) - 1
      },
      next(type) {
        if (type == 'left') {
          this.leftYear = Number(this.leftYear) + 1
          if (this.leftYear > this.rightYear) {
            this.rightYear = Number(this.rightYear) + 1
          }
        } else {
          this.rightYear = Number(this.rightYear) + 1
        }
        // this.currentYear = Number(this.currentYear) + 1
      },
      leftChange(item) {
        if (this.itemDisabled('left', item)) return
        this.start = item.value
        return
        // if (!this.start) {
        //   this.start = item.value
        // } else {
        //   if (item.value > this.start) {
        //     this.end = item.value
        //   } else {
        //     this.start = item.value
        //   }
        // }
      },
      rightChange(item) {
        if (this.itemDisabled('right', item)) return
        this.end = item.value
      },
      mouseOver(e) {
        if (this.start && this.end) {
          this.showClose = true
        }
      },
      mouseOut(e) {
        this.showClose = false
      },
      clearVal() {
        this.start = null;
        this.end = null;
        this.localValue = []
        this.$emit('packageInput', this.localValue)
        this.$emit('quarterRangeChange', undefined)
      },
      visibleChange(visible) {
        if (!visible) {
          if (this.start && this.end) {
            console.log(this.localValue)
            this.$emit('packageInput', this.localValue)
            this.$emit('quarterRangeChange', {
              startYear: this.leftYear,
              endYear: this.rightYear,
              startQuarter: this.start,
              endQuarter: this.end,
              value: this.localValue
            })
          }
        }
      },
    }
  }
</script>

<style>
  .ant-menu-item-active,
  .ant-menu-item-selected{
    border-bottom: 0;
  }
  .headinput {
    position: absolute;
    height: 35px;
    top: -35px;
    background: #fff;
    width: 100%;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    border-bottom: 1px solid #e8e8e8;
    display: flex;
  }
  .calendar_head {
    height: 40px;
    display:
    flex;justify-content:
    space-between;
    align-items:
    center;
    padding: 0 8px;
  }
  .ant-calendar-month-panel-month.selected {
    background: #1890ff;
    color: #fff;
  }
  .ant-calendar-month-panel-month.disabled{
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    cursor: not-allowed;
  }
</style>
